<template>
	<div class="login-captcha" @click="refresh">
		<div v-if="svg" class="svg" v-html="svg"></div>
		<img v-else class="base64" :src="base64" alt=""/>
	</div>
</template>

<script setup>
import { ref, onMounted, onUnmounted,defineProps,defineEmits,defineExpose } from 'vue'
import { ElMessage } from "element-plus";
import api from '@/api/index.js'

const svg = ref("");
const base64 = ref("");
const props = defineProps({
  msg: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(['update:modelValue']);

function refresh(){
  api.open.captcha({
    height: 36,
    width: 110
  }).then((res) => {
    if (res.code !== 0) {
      ElMessage.error(res.message);
      return
    }
    if (res.data.img.includes(";base64,")) {
      base64.value = res.data.img;
    } else {
      svg.value = res.data.img;
    }
    emit('update:modelValue',res.data.captchaId)
  }).catch((err) => {
    console.log(err)
    ElMessage.error(err);
  });
}
onMounted(() => {
  refresh();
});

defineExpose({
  refresh
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.login-captcha {
	height: 36px;
	cursor: pointer;
	background-color: #4e535a;

	.svg {
		height: 100%;
	}

	.base64 {
		height: 100%;
	}
}
</style>
